<template>
	<m-layout :goBack="false" gap="24 0 50" barBg="var(--theme)" color="#fff">
		<m-icon type="gfkx" wh="178 48" slot="back"></m-icon>
		<view class="swiper-box">
			<swiper class="swiper" indicator-color="#CECECE" indicator-active-color="#CECECE" :indicator-dots="true"
				:autoplay="true" :interval="4000" :duration="500">
				<swiper-item v-for="(item,idx) in banner" :key="idx">
					<view class="swiper-item">
						<image class="banner-img" lazy-load="" :src="item.picurl" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="new-ul">
			<m-new-item v-for="(item, idx) in listArr" :key="idx" :item="item"></m-new-item>
		</view>
		<m-loading :list='listArr' :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
	</m-layout>
</template>

<script>
	import { GetNewsPage, getNotice } from '@/api/News.js'
	export default {
		data() {
			return {
				tabIdx: 0,
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
				banner: [],
			};

		},
		watch: {
			tabIdx() {
				this.reset()
			},
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init() {
				await this.getBanner();
				this.reset()
			},
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			async getBanner() {
				const { list } = await GetNewsPage({
					code: 'banner',
				});
				this.banner = list
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount } = await GetNewsPage({
					code: 'content',
					PageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.swiper-box {
		padding: 0 24rpx;

		.swiper {
			height: 240rpx;

			/deep/.uni-swiper-wrapper {
				border-radius: 10rpx;
				overflow: hidden;
			}

			.swiper-item {
				height: 240rpx;

				.banner-img {
					width: 100%;
					height: 240rpx;
					//border-radius: 16rpx;
				}
			}

			/deep/ {
				.uni-swiper-dot {
					width: 10rpx;
					height: 10rpx;
					background: #f6f6f6 !important;
					border-radius: 5rpx;

					&.uni-swiper-dot-active {
						width: 20rpx;
					}
				}
			}
		}
	}
	.menu-box {
		text-align: center;
		padding: 30rpx 40rpx;

		.dl {
			.dd {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #bfbfbf;
			}
		}
	}

	.new-ul {
		padding: 24rpx;
	}
</style>